import React, { useState } from 'react';
import { DatePicker, Button, Input, Table, Form, Select, message } from 'antd';
import qs from 'qs';
import moment from 'moment';
import request from '@/http';

export default () => {
  const [loading, setLoading] = useState(true);
  const [dataSource, setDataSource] = React.useState<any[]>([]);
  const [pagination, setPagination] = React.useState({
    current: 1,
    total: 1,
    pageSize: 5,
    showSizeChanger: true,
    pageSizeOptions: ['5', '10', '20', '50'],
    showQuickJumper: true,
  });

  const loadDataSource = async (
    dataParams: any,
    pageValue: any,
    pageSizeValue: any,
  ) => {
    const result: any = await request.get(
      '/api/teacher/attendance/punchRecord',
      {
        ...dataParams,
        current: pageValue - 1,
        size: pageSizeValue,
      },
    );
    //console.log(result);
    if (result.message == '成功') {
      const data: any = result.data.records.map((user: any) => ({
        key: `user_${user.id}`,
        id: user.id,
        punchDate: user.punchDate, //日期
        studentNo: user.studentNo, //学号
        studentName: user.studentName, //姓名
        punchTime: user.punchTime, //打卡时间
        equipment: user.equipment, //打卡设备
      }));
      const newPageObject = {
        ...pagination,
        current: pageValue,
        size: pageSizeValue,
        total: result.total,
      };
      setPagination(newPageObject);
      setLoading(false);
      setDataSource(data);
    }
  };

  React.useEffect(() => {
    loadDataSource(null, 1, pagination.pageSize).finally();
  }, []);

  const pageOnChange = async (page: any) => {
    await loadDataSource(
      formObject.getFieldsValue(),
      page.current,
      page.pageSize,
    );
  };

  const [formObject] = Form.useForm();

  const searchPunch = async () => {
    const data = await formObject.getFieldsValue();
    const result: any = await request.get(
      '/api/teacher/attendance/punchRecord',
      {
        params: {
          startDate: data.punchDate
            ? moment(data.punchDate[0]).format('YYYY-MM-DD')
            : '',
          endDate: data.punchDate
            ? moment(data.punchDate[1]).format('YYYY-MM-DD')
            : '',
          studentName: data.studentName,
          userNo: data.studentNo,
        },
      },
    );
    if (result.message == '成功') {
      const data = result.data.records.map((user: any) => ({
        key: `user_${user.id}`,
        id: user.id,
        punchDate: user.punchDate, //日期
        studentNo: user.studentNo, //学号
        studentName: user.studentName, //姓名
        punchTime: user.punchTime, //打卡时间
        equipment: user.equipment, //打卡设备
      }));
      setDataSource(data);
    } else {
      message.error('暂无数据');
      setDataSource(result.data.records);
    }
  };

  const ResetPunch = async () => {
    formObject.resetFields();
    loadDataSource(null, 1, pagination.pageSize);
  };

  return (
    <>
      <Form layout="inline" form={formObject}>
        <Form.Item label="日期" name="punchDate">
          <DatePicker.RangePicker style={{ width: 220 }} />
        </Form.Item>
        <Form.Item label="姓名" name="studentName">
          <Input className="entranceGuardInput" placeholder="请输入..." />
        </Form.Item>
        <Form.Item label="学号" name="studentNo">
          <Input className="entranceGuardInput" placeholder="请输入..." />
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={searchPunch}>
            查询
          </Button>
          <Button style={{ marginLeft: 10 }} onClick={ResetPunch}>
            重置
          </Button>
        </Form.Item>
      </Form>
      <div>
        <Table
          columns={[
            {
              title: '日期',
              dataIndex: 'punchDate',
              key: 'punchDate',
              align: 'center',
            },
            {
              title: '姓名',
              dataIndex: 'studentName',
              key: 'studentName',
              align: 'center',
            },
            {
              title: '学号',
              dataIndex: 'studentNo',
              key: 'studentNo',
              align: 'center',
            },
            {
              title: '打卡时间',
              dataIndex: 'punchTime',
              key: 'punchTime',
              align: 'center',
            },
            {
              title: '打卡设备',
              dataIndex: 'equipment',
              key: 'equipment',
              align: 'center',
            },
          ]}
          loading={loading}
          dataSource={dataSource}
          pagination={pagination}
          onChange={pageOnChange}
          tableLayout="fixed"
        />
      </div>
    </>
  );
};
